<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-line',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chart: null
    }
  },

  computed: {
    option () {
      return {
        color: this.colors,
        legend: {
          itemHeight: 10,
          itemWidth: 10,
          icon: this.icon,
          textStyle: {
            padding: [3, 0, 0, 0]
          }
        },
        tooltip: {
          trigger: this.triggerType
        },
        xAxis: {
          type: 'category',
          boundaryGap: this.boundaryGap,
          axisLine: {
            show: true,
            lineStyle: {
              color: this.axisLineColor
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: this.axisLabelColor
            }
          },
          splitLine: {
            lineStyle: {
              color: [
                this.splitLineColor
              ]
            }
          }
        },
        yAxis: {
          boundaryGap: this.boundaryGap,
          axisLine: {
            show: true,
            lineStyle: {
              color: this.axisLineColor
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: this.axisLabelColor
            }
          },
          splitLine: {
            lineStyle: {
              color: [
                this.splitLineColor
              ]
            }
          }
        },
        dataset: {
          source: this.data
        },
        series: [
          { type: this.type, seriesLayoutBy: this.seriesIsRow ? 'row' : 'column' },
          { type: this.type, seriesLayoutBy: this.seriesIsRow ? 'row' : 'column' },
          { type: this.type, seriesLayoutBy: this.seriesIsRow ? 'row' : 'column' }
        ]
      }
    }
  },

  methods: {
    // init() {
    //   this.chart = window.echarts.init(this.$el)
    //   this.setOption()
    // },

    // setOption () {
    //   if (this.data.length > 0) {
    //     this.chart.setOption(this.option, true)
    //     this.resize()
    //   } else {
    //     let html = '<div class="tw-libnodata"></div>'
    //     this.$el.innerHTML = html
    //     this.$el.removeAttribute('_echarts_instance_')
    //   }
    // },

    // resize () {
    //   this.chart.resize({
    //     width: this.$el.offsetWidth || this.$ui.el.innerWidth(this.$el.parentElement),
    //     height: parseInt(this.height) || this.$el.offsetHeight
    //   })
    // }
  },

  // mounted () {
  //   this.init()

  //   window.addEventListener('resize', this.resize)
  // },

  // beforeDestroy () {
  //   window.removeEventListener('resize', this.resize)
  // },

  watch: {
    height () {
      this.resize()
    },
    type () {
      this.setOption()
    },

    data: {
      deep: true,
      handler () {
        this.setOption()
      }
    },

    option: {
      deep: true,
      handler () {
        this.setOption()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
